<template>
  <div>
    <div
      class="header"
      style="
        width: 99%;
        background: #f5f5f6;
        height: 180px;
        border: 1px solid #f5f5f6;
      "
    >
      <p
        style="
        
          text-align: center;
          margin-left: -8%;
          font-size: 32px;
          font-weight: bold;
        "
      >
        房贷计算器
      </p>
      <p style="text-align: center; margin-left: -8%; color: gray">
        复杂的房贷税费计算，泊寓购房工具帮你解决
      </p>
    </div>
    <el-container>
      <el-main>
        <el-card
          style="
            margin-left: 5%;
            margin-top: 5%;
            width: 90%;
            height: auto;
            padding-bottom: 15%;
          "
        >
          <div class="form" style="margin-top: 5%; width: 98%; height: 70px">
              <!-- 左边表单 -->
           <div style="width:53%;height:auto;">
           

       <el-form style="margin-left:60px" ref="form" :model="form" label-width="100px">
             
              <el-form-item
                style="font-weight: bold;width:200px"
                label="贷款方式"
                prop="horientation"
              >
                <el-select style="width: 200px" v-model="form.horientation">
                  <el-option label="商业贷款" value="商业贷款"></el-option>
                  <el-option label="公积金贷款" value="公积金贷款"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                style="font-weight: bold"
                label="计算方式"
                prop="method"
              >
                <el-input placeholder="按贷款金额"
                      
                         :disabled="true" style="width: 50%" v-model="form.price"></el-input
                >
              </el-form-item>

              <el-form-item
                style="font-weight: bold"
                label="贷款金额"
                prop="price"
              >
                <el-input style="width: 50%" v-model="form.price"></el-input
                > 万元
              </el-form-item>
             <el-form-item
                style="font-weight: bold"
                label="商贷利率方式"
                prop="method"
              >
                <el-input placeholder="按最新LPR"
                      
                         :disabled="true" style="width: 50%" v-model="form.method"></el-input
                >
              </el-form-item>
               <el-form-item
                style="font-weight: bold"
                label="LPR"
                prop="lpr"
              >
                <el-input style="width: 50%" v-model="form.lpr"></el-input
                > %
              </el-form-item>
               <el-form-item
                style="font-weight: bold"
                label="基点"
                prop="jidian"
              >
                <el-input style="width: 50%" v-model="form.jidian"></el-input
                > BP
              </el-form-item>
              <el-form-item
                style="font-weight: bold;width:200px"
                label="商贷年限"
                prop="nianxian"
              >
                <el-select style="width: 100px" v-model="form.nianxian">
                  <el-option label="30年" value="30年"></el-option>
                  <el-option label="20年" value="20年"></el-option>
                  <el-option label="10年" value="10年"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  plain
                  style="font-weight: bold; margin-left: 15%"
                  type="info"
                  @click="onSubmit"
                  >计算</el-button
                >
              </el-form-item>
            </el-form>
            <p style="text-align: center;font-size:10px;color:gray;">本次计算结果仅供购房参考，具体贷款情况建议咨询<a href="#/kefu" style="color:black">客服</a></p>

           </div>
           <!-- 右边表格 -->
           <div style="width:45%;height:400px;float:right;margin-top:-58.5%;">
            <div style="border:2px solid black;width:350px; height:300px;">
                <div style="background-color:#303133;width:350px;height:70px;display: table-cell;
            vertical-align:middle">
                    <span style="">
                        <p style="font-size:16px;margin-left:35px;color:white;font-weight:bold;float:left">类型 · </p>
                         </span>
                        <span><p style="font-size:16px;color:white;font-weight:bold;float:right;margin-right:55px;">等额本息还款</p></span>
                </div>
                <div>
                    <div style="float:left">
                        <p style="font-weight:bold;font-size:16px;margin-left:35px;margin-bottom:25px;">月供</p>
                        <p style="font-weight:bold;font-size:16px;margin-left:35px;margin-bottom:25px;">贷款年限</p>
                        <p style="font-weight:bold;font-size:16px;margin-left:35px;margin-bottom:25px;">贷款总额</p>
                        <p style="font-weight:bold;font-size:16px;margin-left:35px;margin-bottom:25px;">利息总额</p>
                    </div>
                    <div style="float:left;margin-top:7px">
                        <p style="font-size:14px;color:red;margin-left:100px;margin-bottom:25px;">3000</p>
                        <p style="font-size:14px;color:red;margin-left:100px;margin-bottom:25px;">30</p>
                        <p style="font-size:14px;color:red;margin-left:100px;margin-bottom:25px;">0.79</p>
                        <p style="font-size:14px;color:red;margin-left:100px;margin-bottom:25px;">10.79</p>
                    </div>
                    <div style="float:right">
                        <p style="font-size:16px;margin-right:55px;margin-bottom:25px;"> 元</p>
                        <p style="font-size:16px;margin-right:55px;margin-bottom:25px;"> 年</p>
                        <p style="font-size:16px;margin-right:55px;margin-bottom:25px;">万元</p>
                        <p style="font-size:16px;margin-right:55px;margin-bottom:25px;">万元</p> 
                    </div>
                </div>
            </div>
           </div>
            
             
              
            
          </div>
        </el-card>
      </el-main>
      <br />
      <br />
      <el-footer style="display: flex; color: #f5f5f6">
        <div style="width: 20%; height: 90px; align-self: center">
          <p style="text-align: center; margin-top: 28px">
            <a
              style="
                color: #545c64;
                font-size: 26px;
                font-weight: bold;
                text-decoration: none;
              "
              href="#/"
              >泊寓</a
            >
          </p>
        </div>
        <div
          style="width: 50%; height: 90px; align-self: center; margin-left: 3%"
        >
          <p style="color:black;font-size: 13px; text-align: center; margin-top: 35px">
            <img src="../img/pl.png" style="width: 12px" /> 鲁公网安备
            31010402000253号 | 鲁ICP备17003747号
          </p>
        </div>
        <div
          style="width: 20%; height: 90px; align-self: center; margin-left: 3%"
        >
          <p style="color:black;font-size: 13px; text-align: center; margin-top: 35px">
            <i class="el-icon-phone-outline">010-6088-8888</i>
          </p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { addHouse } from "@/network/house";
export default {
  data() {
      return {
        form: {
          name: '',
          type: '',
          method:'',
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
  }
}
</script>

<style>
.el-upload-list {
  width: 50%;
}
</style>